<script setup lang='ts'>
  import { reactive, ref, nextTick, computed, watch } from 'vue'
  import { getOSSFile } from '@/utils/public';
  const props = defineProps({
    contKey:{
      type:Number,
      default:0
    },
    passageKey:{
      type:Number,
      default:0
    },
    cont:{
      type:Object,
      default:()=>{}
    },
    // 屏幕窗口宽度
    clientWidth:{
      type:Number,
      default:375
    },
    // 弹幕视口宽度
    barrageBoxWidth:{
      type:Number,
      default:375
    },
    playState:{
      type:Boolean,
      default:true
    },
  })
  watch(props,()=>{
    if(props.playState) {
      if(remainderTime > 0) {
        emitAddChange(remainderTime)
        remainderTime = 0
      }
    } else {
      clearTimeout(timeout)
      const endTime = new Date().getTime()
      remainderTime = widthTime - (endTime - playTime)
    }
  })
  const contFont = computed(()=>{
    if(!props.cont.id) return {
      content:''
    }
    endReportSet = false
    nextTick(()=>{
      const { offsetWidth=0 } = contRef.value
      action.toastTime =  (props.barrageBoxWidth + offsetWidth) / 80
      widthTime = ((offsetWidth + 30) / 80) * 1000
      emitAddChange(widthTime)
    })
    return props.cont
  })
  const $emit = defineEmits(['addChange','endChange'])
  const contRef = ref()
  const action = reactive({
    toastTime:0,
  })
  let timeout = 0; // 延时任务
  let playTime = 0; // 延时任务开始的时间
  let widthTime = 0; // 延时任务执行时间
  let remainderTime = 0; // 延时任务执行剩余时间
  /**
   * 弹幕追加
   */
  const emitAddChange = (time:number = 0)=>{
    if(!time) return console.error('emitAddChange time error')
    playTime = new Date().getTime()
    timeout = setTimeout(() => {
      $emit('addChange',{
        passageKey:props.passageKey,
        contKey:props.contKey
      })
      clearTimeout(timeout)
    }, time);
  }
  let endReportSet = false
  /**
   * 动画结束回调
   * @param e
   */
  const transitionendFun = (e:any)=>{
    const { elapsedTime=0 } = e
    if(!elapsedTime) return
    endReportSet = true
    $emit('endChange', {
      passageKey:props.passageKey,
      contKey:props.contKey
    })
  }
</script>

<template>
  <div
    ref="contRef"
    :class="[
      'passageCont flex-align',
      `backColor${contFont.id%2}`,
      endReportSet?'':'passageContMove'
    ]"
    :style="{
      '---right':`-${barrageBoxWidth}px`,
      '---time':action.toastTime + 's',
      '---playState':playState?'running':'paused'
    }"
    @animationend="transitionendFun">
      <img v-if="contFont.image" :src="getOSSFile(contFont.image)" class="portrait">
      <div>{{ contFont.content }}</div>
  </div>
</template>

<style lang='scss' scoped>
  .passageCont {
    position: absolute;
    right: 0;
    transform: translateX(100%);
    width: max-content;
    min-width: 60px;
    padding: 5px 0 5px 5px;
    box-sizing: border-box;
    border-radius: 19px;
    transform-style: preserve-3d;
    .portrait {
      overflow: hidden;
      width: 20px;
      min-width: 20px;
      max-width: 20px;
      height: 20px;
      border-radius: 100%;
      border: var(--messagePortraitBorder);
      box-sizing: border-box;
      margin-right: 5px;
    }
  }
  .passageContMove {
    animation:move var(---time) linear 1 var(---playState);
  }
  @keyframes move
  {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(var(---right));
    }
  }
  .backColor0 {
    background: var(--messageContFontColor1);
  }
  .backColor1 {
    background: var(--messageContFontColor2);
  }
  div {
    width: max-content;
    min-width: max-content;
    color: var(--messageFontColor);
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    padding: 0 10px 0 0;
    box-sizing: border-box;
    white-space: normal;
    -webkit-text-size-adjust: none;
  }
</style>